<template>
  <view class="index_container">
    <!-- 公共组件-每个页面必须引入 -->
    <public-module></public-module>

    <!-- <view class="money_card">
      <view class="money_card_content">
        <view class="money_card_content_values">0.00</view>

        <view class="money_card_content_desc">錢包（元）</view>
      </view>

      <view class="money_card_btn"> 去充值 </view>
    </view> -->

    <view style="height: 20.93rpx; background: #f8f8f8"></view>
    <!-- 消费记录 -->
    <view class="consume_record_container">
      <u-list @scrolltolower="scrolltolower">
        <u-list-item v-for="(item, index) in indexList" :key="index">
          <view class="index_list_item">
            <view class="index_list_item_left">
              <view class="record_title">
                <view class="title_tag">内用</view>
                <view class="title">門店名稱</view>
              </view>
              <view class="record_time">2024-08-08 13:00:00</view>
            </view>
            <view class="index_list_item_right">
              <view class="index_list_item_right_title">$ 300.00</view>
              <view class="index_list_item_right_desc">共1件</view>
            </view>
          </view>
        </u-list-item>
      </u-list>
    </view>
  </view>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import base from "@/config/baseUrl";
import fNavbar from "@/components/module/f-navbar/f-navbar";
import fTabbar from "@/components/module/f-tabbar/f-tabbar";

export default {
  components: {
    fNavbar,
    fTabbar,
  },
  computed: {
    ...mapState(["PrimaryColor", "userInfo"]),
    freeSpecsButtonBackground() {
      return this.$u.colorToRgba(this.$u.rgbToHex(this.PrimaryColor), 0.75);
    },
  },
  data() {
    return {
      baseUrl: base.baseUrl,
      systemInfo: base.systemInfo,
      indexList: [],
      urls: [
        "https://cdn.uviewui.com/uview/album/1.jpg",
        "https://cdn.uviewui.com/uview/album/2.jpg",
        "https://cdn.uviewui.com/uview/album/3.jpg",
        "https://cdn.uviewui.com/uview/album/4.jpg",
        "https://cdn.uviewui.com/uview/album/5.jpg",
        "https://cdn.uviewui.com/uview/album/6.jpg",
        "https://cdn.uviewui.com/uview/album/7.jpg",
        "https://cdn.uviewui.com/uview/album/8.jpg",
        "https://cdn.uviewui.com/uview/album/9.jpg",
        "https://cdn.uviewui.com/uview/album/10.jpg",
      ],
    };
  },
  onLoad() {
    // 隐藏原生的tabbar
    uni.hideTabBar();

    this.loadmore();
  },
  methods: {
    ...mapMutations(["setLoginPopupShow"]),
    scrolltolower() {
      this.loadmore();
    },
    loadmore() {
      for (let i = 0; i < 30; i++) {
        this.indexList.push({
          url: this.urls[uni.$u.random(0, this.urls.length - 1)],
        });
      }
    },
  },
  onPageScroll(e) {},
};
</script>

<style lang="scss" scoped>
page {
  height: 100%;
  background-color: rgba(243, 243, 243, 1);
}

.index_container {
  //   padding-left: 26.163rpx;
  //   padding-right: 26.163rpx;
}

.index_list_item {
  margin-left: 26.163rpx;
  margin-right: 26.163rpx;

  width: 695.93rpx;
  height: 137.791rpx;
  background: rgba(238, 238, 238, 1);
  // margin-top: 15px;

  padding: 20.93rpx;

  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-bottom: 20rpx;

  .index_list_item_left {
    display: flex;
    flex-direction: column;
  }

  .title_tag {
    background: rgba(36, 118, 173, 1);

    width: 153.488rpx;
    height: 52.326rpx;

    font-family: "Microsoft JhengHei";
    font-size: 34.884rpx;
    font-weight: 400;
    line-height: 10.465rpx;
    text-align: center;

    display: flex;
    justify-content: center;
    align-items: center;

    color: rgba(255, 255, 255, 1);
  }

  .record_title {
    display: flex;
    align-items: center;

    font-family: "Microsoft JhengHei";
    font-size: 34.884rpx;
    font-weight: 400;
    line-height: 10.465rpx;
    text-align: center;
    color: rgba(0, 0, 0, 1);

    .title {
      margin-left: 10rpx;
    }
  }

  .record_time {
    font-family: "Microsoft JhengHei";
    font-size: 24.419rpx;
    font-weight: 400;
    text-align: left;
    margin-top: 20rpx;
  }

  .index_list_item_right {
    .index_list_item_right_title {
      font-family: "Microsoft JhengHei";
      font-size: 27.907rpx;
      font-weight: 400;
      text-align: center;
      color: rgba(85, 85, 85, 1);
    }
    .index_list_item_right_desc {
      font-family: "Microsoft JhengHei";
      font-size: 20.93rpx;
      font-weight: 400;
      // line-height: 167.442rpx;
      text-align: center;

      margin-top: 12rpx;
    }
  }
}
</style>
